import React, { useState } from 'react';
import {
  Box,
  Typography,
  Paper,
  Container,
  Grid,
  Card,
  CardContent,
  CardMedia,
  Button,
  Chip,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Snackbar,
  Alert
} from '@mui/material';
import './businessAdmin.css';

const initialApplications = [
  {
    id: 1,
    businessName: "Red Tree Bar",
    businessType: "Bar",
    phone: "+1 312 853 7036",
    address: "2855 Cherry Camp Road",
    businessHours: "17:00 - 02:00",
    imageUrl: "https://images.unsplash.com/photo-1572116469696-31de0f17cc34",
    applicantName: "Anbi Asjal",
    applicantPhone: "+1 312 853 7036",
    status: "pending"
  },
  {
    id: 2,
    businessName: "Blue Ocean Sushi",
    businessType: "Restaurant",
    phone: "+1 415 555 0123",
    address: "789 Seafood Avenue",
    businessHours: "11:00 - 22:00",
    imageUrl: "https://images.unsplash.com/photo-1579027989536-b7b1f875659b",
    applicantName: "Sarah Chen",
    applicantPhone: "+1 415 555 0124",
    status: "pending"
  },
  {
    id: 3,
    businessName: "The Vinyl Room",
    businessType: "Music Bar",
    phone: "+1 212 555 9876",
    address: "456 Jazz Street",
    businessHours: "18:00 - 03:00",
    imageUrl: "https://images.unsplash.com/photo-1516450360452-9312f5e86fc7",
    applicantName: "Mike Johnson",
    applicantPhone: "+1 212 555 9877",
    status: "pending"
  },
  {
    id: 4,
    businessName: "Green Garden Cafe",
    businessType: "Cafe",
    phone: "+1 650 555 4321",
    address: "123 Nature Way",
    businessHours: "07:00 - 20:00",
    imageUrl: "https://images.unsplash.com/photo-1554118811-1e0d58224f24",
    applicantName: "Emma Wilson",
    applicantPhone: "+1 650 555 4322",
    status: "pending"
  },
  {
    id: 5,
    businessName: "The Social Hub",
    businessType: "Co-working Space",
    phone: "+1 408 555 7890",
    address: "567 Innovation Drive",
    businessHours: "09:00 - 22:00",
    imageUrl: "https://images.unsplash.com/photo-1497366216548-37526070297c",
    applicantName: "David Park",
    applicantPhone: "+1 408 555 7891",
    status: "pending"
  }
];

export default function BusinessAdmin() {
  const [applications, setApplications] = useState(initialApplications);
  const [selectedApplication, setSelectedApplication] = useState(null);
  const [openDialog, setOpenDialog] = useState(false);
  const [snackbar, setSnackbar] = useState({
    open: false,
    message: '',
    severity: 'success'
  });

  const handleViewDetails = (application) => {
    setSelectedApplication(application);
    setOpenDialog(true);
  };

  const handleCloseDialog = () => {
    setOpenDialog(false);
  };

  const handleApprove = (id) => {
    setApplications(applications.filter(app => app.id !== id));
    setSnackbar({
      open: true,
      message: 'Application approved successfully',
      severity: 'success'
    });
    handleCloseDialog();
  };

  const handleReject = (id) => {
    setApplications(applications.filter(app => app.id !== id));
    setSnackbar({
      open: true,
      message: 'Application rejected',
      severity: 'error'
    });
    handleCloseDialog();
  };

  const handleCloseSnackbar = () => {
    setSnackbar({ ...snackbar, open: false });
  };

  return (
    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
      <Typography variant="h4" component="h1" gutterBottom>
        Business Applications
      </Typography>

      <Grid container spacing={3}>
        {applications.map((application) => (
          <Grid item xs={12} key={application.id}>
            <Card>
              <Grid container>
                <Grid item xs={12} md={3}>
                  <CardMedia
                    component="img"
                    height="200"
                    image={application.imageUrl}
                    alt={application.businessName}
                    sx={{ objectFit: 'cover' }}
                  />
                </Grid>
                <Grid item xs={12} md={9}>
                  <CardContent>
                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                      <Typography variant="h5" component="h2">
                        {application.businessName}
                      </Typography>
                      <Chip
                        label={application.status.toUpperCase()}
                        color={application.status === 'pending' ? 'warning' : 'success'}
                      />
                    </Box>
                    <Grid container spacing={2}>
                      <Grid item xs={12} md={6}>
                        <Typography variant="body1">
                          <strong>Type:</strong> {application.businessType}
                        </Typography>
                        <Typography variant="body1">
                          <strong>Phone:</strong> {application.phone}
                        </Typography>
                        <Typography variant="body1">
                          <strong>Address:</strong> {application.address}
                        </Typography>
                      </Grid>
                      <Grid item xs={12} md={6}>
                        <Typography variant="body1">
                          <strong>Business Hours:</strong> {application.businessHours}
                        </Typography>
                        <Typography variant="body1">
                          <strong>Applicant:</strong> {application.applicantName}
                        </Typography>
                        <Typography variant="body1">
                          <strong>Applicant Phone:</strong> {application.applicantPhone}
                        </Typography>
                      </Grid>
                    </Grid>
                    <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
                      <Button
                        variant="contained"
                        color="success"
                        onClick={() => handleApprove(application.id)}
                      >
                        Approve
                      </Button>
                      <Button
                        variant="contained"
                        color="error"
                        onClick={() => handleReject(application.id)}
                      >
                        Reject
                      </Button>
                      <Button
                        variant="outlined"
                        onClick={() => handleViewDetails(application)}
                      >
                        View Details
                      </Button>
                    </Box>
                  </CardContent>
                </Grid>
              </Grid>
            </Card>
          </Grid>
        ))}
      </Grid>

      <Dialog
        open={openDialog}
        onClose={handleCloseDialog}
        maxWidth="md"
        fullWidth
      >
        {selectedApplication && (
          <>
            <DialogTitle>
              Application Details - {selectedApplication.businessName}
            </DialogTitle>
            <DialogContent>
              <CardMedia
                component="img"
                height="300"
                image={selectedApplication.imageUrl}
                alt={selectedApplication.businessName}
                sx={{ objectFit: 'cover', borderRadius: 1, mb: 2 }}
              />
              <TableContainer component={Paper}>
                <Table>
                  <TableBody>
                    <TableRow>
                      <TableCell component="th" scope="row" width="200">
                        Business Name
                      </TableCell>
                      <TableCell>{selectedApplication.businessName}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell component="th" scope="row">
                        Business Type
                      </TableCell>
                      <TableCell>{selectedApplication.businessType}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell component="th" scope="row">
                        Phone
                      </TableCell>
                      <TableCell>{selectedApplication.phone}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell component="th" scope="row">
                        Address
                      </TableCell>
                      <TableCell>{selectedApplication.address}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell component="th" scope="row">
                        Business Hours
                      </TableCell>
                      <TableCell>{selectedApplication.businessHours}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell component="th" scope="row">
                        Applicant Name
                      </TableCell>
                      <TableCell>{selectedApplication.applicantName}</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell component="th" scope="row">
                        Applicant Phone
                      </TableCell>
                      <TableCell>{selectedApplication.applicantPhone}</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </DialogContent>
            <DialogActions>
              <Button onClick={handleCloseDialog} color="primary">
                Close
              </Button>
              <Button onClick={() => handleApprove(selectedApplication.id)} color="success" variant="contained">
                Approve
              </Button>
              <Button onClick={() => handleReject(selectedApplication.id)} color="error" variant="contained">
                Reject
              </Button>
            </DialogActions>
          </>
        )}
      </Dialog>

      <Snackbar
        open={snackbar.open}
        autoHideDuration={6000}
        onClose={handleCloseSnackbar}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
      >
        <Alert onClose={handleCloseSnackbar} severity={snackbar.severity} sx={{ width: '100%' }}>
          {snackbar.message}
        </Alert>
      </Snackbar>
    </Container>
  );
} 